<template>
  <div class="app">
    <myNavbar title="选择好友"></myNavbar>
    <list style="height: 1000px">
      <cell>
        <div class="contain"  >
          <div class="item-wrap" v-for="(item,index) in 18"  style="width: 710px;" >

            <div  class="item"  style="width: 870px;height: 80px;" ref="itemDev" @swipe="handleSwipe($event,index)">
                <text class="fontSize28">18250897777/</text>
                <text class="fontSize28">王志忠/</text>
                <text class="fontSize28">30010</text>
                <div class="item-selectFriends">
                  <text class="item-selectFriends-text">删除好友</text>
                </div>
            </div>

          </div>
        </div>
      </cell>
    </list>
  </div>
</template>
<script>
import myNavbar from "./components/myNavbar/myNavbar.vue"
const animation = weex.requireModule("animation");
export default {
  name: "selectFriends.vue",
  data(){
    return{
      statusBarHeight:800
          // eeui.getStatusBarHeightPx(),
    }
  },
  components: { myNavbar },
  created(){
  },
  methods:{

    handleSwipe(e, index) {
      if (e.direction == "left") {
        this.goLeft(index);
      } else if (e.direction == "right") {
        this.goRight(index);
      }
    },
    goLeft(index) {
      let itemEl = this.$refs.itemDev[index]; //第二左滑条目与前一次左滑条目相同时，不处理
      console.log("111111111233333333333333")
      console.log(itemEl)

      if (index == this.currentIndex) {
        return;
      } //当前有划出的条目的时候，左滑其他条目，当前的条目归位，
      if (this.currentIndex != -1) {
        this.goRight(this.currentIndex);
      } //左滑当前条目
      if (this.currentIndex != index) {
        animation.transition(
            itemEl,
            {
              styles: {
                transform: "translate(-160px, 0px)",
                transformOrigin: "center center",
              },
              duration: 200, //ms
              timingFunction: "linear",
              delay: 0, //ms
            },
            function () {}
        );
        this.currentIndex = index;
      }
    }, //time是动画时间，给个默认值 200毫秒，不传就表明这个值为200毫秒
    goRight(index, time = 200) {
      let itemEl = this.$refs.itemDev[index];
      animation.transition(
          itemEl,
          {
            styles: {
              transform: "translate(0px, 0px)",
              transformOrigin: "center center",
            },
            duration: time, //动画时间
            timingFunction: "linear", //线性运动
            delay: 0, //ms
          },
          function () {}
      );

      this.currentIndex = -1;
    }, //点击删除

  },
}
</script>


<style scoped>
.app{
  background-color: #006056;
}
.contain{
  padding-left: 20px;
  padding-right: 20px;
}
.item-wrap{
  margin-top: 25px;
  border-radius: 16px;
  height: 80px;
  background-color: green;
}
.item{
  position: relative;
  /*margin-left: 20px;*/
  padding-left: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 710px;
  height: 80px;
  background-color:#d3d1d2;

  /*border-radius: 16px;*/
}
.fontSize28{
  font-size: 28px;
  color:#323031;
  letter-spacing: 5px;
}
.item-selectFriends{
  position: absolute;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  background-color:#ff9c37;
  height: 90px;
}
.item-selectFriends-text{
  font-size: 32px;
  color: white;
}


</style>
